<template>
<div>

<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">首页</el-menu-item>
  
   <el-menu-item index="2"><a   @click="goWishcard">我的心愿卡</a></el-menu-item>
  <el-submenu index="3">
    <template slot="title">消息中心</template>
    <el-menu-item index="2-1">官网客服消息</el-menu-item>
    <el-menu-item index="2-2">卖家消息</el-menu-item>
    <el-menu-item index="2-3">买家消息</el-menu-item>
    
  </el-submenu>

  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    <el-menu-item index="5" >网站导航</el-menu-item>
  <el-submenu index="6">
    <template slot="title">我的</template>
    <el-menu-item index="2-1">已经买到的宝贝</el-menu-item>
    <el-menu-item index="2-2">我的收藏</el-menu-item>
    <el-menu-item index="2-3">我的上新</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">个人信息</template>
      <el-menu-item index="2-4-1">收货地址</el-menu-item>
      <el-menu-item index="2-4-2"  @click="goMyPage">个人信息管理</el-menu-item>
      <el-menu-item index="2-4-3">我的钱包</el-menu-item>
    </el-submenu>
  </el-submenu>
</el-menu>



<div>
     <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>

</div>  

 <div class="box">
              <div class="searchBox">
                    <input type="text" v-model="keyword" placeholder="请输入商品名进行搜索" class="searchInput" style="padding-left: 10px;">
                    <input type="button"  @click="_search" value="搜索" class="searchButton">
                 </div>
            </div>

</div>


</template>

<script>
export default {
 methods: {
    goWishcard(){
        this.$router.push("/Wishcard");
     },
     goMyPage(){
        this.$router.push("/MyPage");
     }
     
 }
}

</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-image: url('../assets/images/advertising.png');
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-image: url('../assets/images/dog.png');
  }
.box{
    margin: 0 auto;
    padding-top: 80px;
    height: 50px;
    width: 100%;
  }
  .searchBox{
    margin: 0 auto;
    width: 60%;
    position: relative;
  }
  .searchInput{
    display: inline-block;
    width: 85%;
    height: 38px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .searchButton{
    display: inline-block;
    width: 15%;
    height: 38px;
    line-height: 40px;

    background-color: #00a0e9;
    font-size: 16px;
    cursor: pointer;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: none;
    color: #fff;
  }
  body {
   
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
   
}
</style>
